<template>
	<view class="warp">
		<view class="list">
			<view class="item" v-for="(item,index) in list">
				<view class="left" @click="toedit(item)">
					{{item.surveyName}}
				</view>
				<view class="right" style="display: flex;">
					<uni-icons type="back" size="22" v-if="!item.deleshow" @click="changeshow(index,item)"></uni-icons>
					<uni-icons type="forward" size="22" v-if="item.deleshow" @click="changeshow(index,item)"></uni-icons>
					 <view @click="editpo(item)" style="font-size: 24rpx;margin-left: 25rpx;padding: 0rpx 16rpx;color: #feb858;" class="" v-if="item.deleshow">
					 编辑
					 </view>
					<view @click="oppopup(item)" class="" style="font-size: 24rpx;margin-left: 25rpx;padding: 0rpx 16rpx;color: #f32905;" v-if="item.deleshow">
						删除
					</view>
				</view>
			</view>
		</view>
		<view class="" style="margin-bottom: 25%;">
			
		</view>
		<view class="btn_butom" v-if="isshop">
			<view class="" @click="addcustomer">
				创建问卷
			</view>
		</view>
		<uni-popup ref="popup" type="center"   background-color="#fff">
			<view class="" style="background-color: #fff;border-radius: 10rpx;">
				
				 <view class="title">
				创建问卷
				 </view>
				<view class="form">
					<view class="" style="display: flex;align-items: center;">
					 <span style="margin-right: 15rpx;">问卷标题:</span>
						<input v-model="queryform.surveyName" type="text" placeholder="请输入问卷标题"></input>
					</view>
					
					 
				</view>
				<view class="button">
					<view class="left" @click="cancel">
					取消
					</view>
					<view class="right" @click="submit">
						确定
				</view>
				</view>
				</view>
				<view class="" style="margin-bottom: 25%;">
					
				</view>
		</uni-popup>
		<uni-popup ref="popdelete" type="dialog">
			<uni-popup-dialog :before-close="true" type="input" :title="$L('提示')" :content="$L('是否确认删除')" :duration="2000"
				@confirm="confirmLogins" @close="closefn">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import {
			mapState,
			mapMutations
		} from 'vuex'
	export default {
		components:{
		uniPopup,
		uniPopupMessage,
		uniPopupDialog
			
		},
		data() {
			return {
				list:[],
				queryform:{
					createId:'',
					surveyName:''
				},
				listform:{
					pageSize:20,
					current:1
				},
				total:0,
				isshop:false,
				deleshow:false,
				iteminfo:{}
			};
		},
		onLoad() {
			this.getidshop()
			this.getlist()
		},
		computed: {
					...mapState(['hasLogin', 'userInfo', 'userCenterData']),
					},
					// 下拉
						onPullDownRefresh() {
							// 刷新位置
							
						this.getlist()
							var that=this
							setTimeout(function(){
									uni.stopPullDownRefresh()
								},1000)
						},
						onReachBottom(){
							if(this.listform.pageSize*this.listform.current>this.total){
								uni.showToast({
									title:"数据加载完毕",
									icon:'none'
								})
							}else{
								this.listform.current++
								this.$request({
									url:'v3/survey/front/survey/list',
									method:'GET',
									data:this.listform
								}).then(res=>{
									this.list.push(...res.data.list)
									
								})
							}
						},
		methods:{
			// 获取列表
			getlist(){
				this.$request({
					url:'v3/survey/front/survey/list',
					method:'GET',
					data:{createId:this.userCenterData.vendorId}
				}).then(res=>{
					if(res.state==200){
						this.list=res.data.list
						this.total=res.data.pagination.total
					    this.list.forEach(item=>{
					    	item.deleshow=false
					    })
					}
				})
			},
			// 打开弹框
			addcustomer(){
					this.$refs.popup.open()
			},
			cancel(){
			this.$refs.popup.close()
			},
			// 校验是否是商户
			getidshop(){
				this.$request({
					url:'v3/seller/front/vendor/list',
					method:"GET",
					data:{vendorMobile:this.userCenterData.memberMobile}
				}).then(res=>{
					if(res.data.length!=0){
						this.isshop=true
					}else{
						uni.showToast({
							title:'升级商户可操作',
							icon:'none'
						})
					}
				})
				
			},
			// 创建问卷
			submit(){
				this.queryform.createId=this.userCenterData.vendorId
				if(this.queryform.surveyName){
				
					this.$request({
						url:'v3/survey/front/survey/add',
						method:'POST',
						header:{
						  'Content-Type': 'application/json'
						},
						data:this.queryform
					}).then(res=>{
						if(res.state==200){
							uni.showToast({
								title:'添加成功'
							})
							this.getlist()
							// 清空表单
							this.queryform={}
							this.$refs.popup.close()
						}
					})
				}else{
					uni.showToast({
						title:'请填写问卷标题',
						icon:'none'
					})
				}
			},
			// 跳转编辑
			editpo(val){
				uni.navigateTo({
					url:"/extra/editquestion/editquestion?id="+val.surveyId
				})
			},
			toedit(val){
				uni.navigateTo({
					url:"/extra/questionnaireinfo/questionnaireinfo?id="+val.surveyId
				})
			},
			changeshow(index,val){
				if(val.deleshow){
					val.deleshow=false
				}else{
					val.deleshow=true
				}
				
				this.$set(this.list,index,val)//更改数组（数组，索引，新值）
				
				
			},
			// 删除弹框
			oppopup(val){
				this.$refs.popdelete.open()
				this.iteminfo=val
			},
			// 取消
			closefn(){
				this.$refs.popdelete.close()
			},
			// 确认删除
			confirmLogins(){
				this.$request({
					url:'v3/survey/front/survey/delete?id='+this.iteminfo.surveyId,
					method:"GET"
				
				}).then(res=>{
					if(res.state==200){
					this.$refs.popdelete.close()
					this.getlist()
					}
				})
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
page{
		width: 750rpx;
		margin: 0 auto;
		background: #F5F5F5;
	}
	.warp{
		background: #F5F5F5;
		overflow: hidden;
		.list{
			.item{
				margin-top: 10rpx;
				height: 100rpx;
				line-height: 80rpx;
				padding: 10rpx 20rpx;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
			}
		}
		.btn_butom{
			position: fixed;
			bottom: 30rpx;
			left: 34%;
			padding: 15rpx 60rpx;
			color: #fff;
			background-color: #feb858;
			border-radius: 50rpx;
			
		}
		.title{
			padding-top: 10rpx;
			text-align: center;
			font-size: 32rpx;
		}
		.form{
			padding: 80rpx;
		}
		.button{
			width: 100%;
			height: 80rpx;
			border-top: 2rpx solid #cecece;
			display: flex;
			.left{
				width: 50%;
				height: 80rpx;
				border-right: 2rpx solid #cecece;
				text-align: center;
				line-height: 80rpx;
			}
			.right{
				width: 50%;
				text-align: center;
				line-height: 80rpx;
			}
			
		}
	}
</style>
